<template>
  <div>
    <!--    <quill-editor  v-model="content" :options="editorOption" style="height:100px;"></quill-editor>-->
    <!--    <p style="margin-top: 100px">{{content}}</p>-->
    <!--    <el-button @click="test"> 点 击</el-button>-->
    <el-form ref="searchForm" :model="queryInfo" label-width="20px">
      <el-row :gutter="20">
        <div v-if="GLOBAL.global_limit.includes('32')">
          <el-col :span="1" offset="0">
            <el-button type="primary" size="mini" @click="showAdd">新增图文</el-button>
          </el-col>
        </div>
        <div v-if="GLOBAL.global_limit.includes('31')">
          <el-col :span="4" offset="1">
            <el-input v-model="queryInfo.picName" width="80px" size="small" suffix-icon="el-icon-search" clearable placeholder="请输入图文名称"></el-input>
          </el-col>
          <el-col :span="3">
            <el-select  v-model="queryInfo.picType" size="small" filterable clearable placeholder="请选择图文类型">
              <el-option
                v-for="item in picType"
                :key="item.id"
                :label="item.value"
                :value="item.value"/>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select v-model="queryInfo.picStatus" size="small" filterable clearable placeholder="请选择图文状态">
              <el-option
                v-for="item in status"
                :key="item.id"
                :label="item.value"
                :value="item.value"/>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-date-picker
              v-model="queryInfo.filterDates"
              type="daterange"
              value-format="yyyy-MM-dd"
              align="left"
              size="small"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-col>

          <el-col :span="2" offset="4">
            <el-button type="primary" size="mini" @click="initData">搜索</el-button>
          </el-col>
        </div>
      </el-row>
    </el-form>
    <el-dialog title="新增图文" align="left" :visible.sync="dialogFormVisible">
      <el-form :model="addInfo" label-width="100px">
        <el-form-item label="图文名称" >
          <el-input v-model="addInfo.picName" ></el-input>
        </el-form-item>
        <el-form-item label="发布类型" >
          <el-select v-model="addInfo.picType" placeholder="请选择发布类型">
            <el-option label="公告信息" value="公告信息"></el-option>
            <el-option label="用户协议" value="用户协议"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图文状态" >
          <el-select v-model="addInfo.picStatus" placeholder="请选择图文状态">
            <el-option label="启用中" value="启用中"></el-option>
            <el-option label="未启用" value="未启用"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图文详情" >
          <quill-editor  v-model="addInfo.picDetails" :options="editorOption" style="height:300px;"></quill-editor>
        </el-form-item>
      </el-form>
      <div style="margin-top: 100px" slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click=addPic>确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑图文" align="left" :visible.sync="dialogForm2Visible">
      <el-form :model="editInfo" label-width="100px">
        <el-form-item label="图文名称" >
          <el-input v-model="editInfo.picName" ></el-input>
        </el-form-item>
        <el-form-item label="发布类型" >
          <el-select v-model="editInfo.picType" placeholder="请选择发布类型">
            <el-option label="公告信息" value="公告信息"></el-option>
            <el-option label="用户协议" value="用户协议"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图文状态" >
          <el-select v-model="editInfo.picStatus" placeholder="请选择图文状态">
            <el-option label="启用中" value="启用中"></el-option>
            <el-option label="未启用" value="未启用"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图文详情" >
          <quill-editor  v-model="editInfo.picDetails" :options="editorOption" style="height:300px;"></quill-editor>
        </el-form-item>
      </el-form>
      <div style="margin-top: 100px" slot="footer" class="dialog-footer">
        <el-button @click="dialogForm2Visible = false">取 消</el-button>
        <el-button type="primary" @click=Edit>确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="图文内容展示" align="left" :visible.sync="dialogForm3Visible">
      <p class="ql-editor" v-html="content"></p>
      <div style="margin-top: 10px" slot="footer" class="dialog-footer">
        <el-button @click="dialogForm3Visible = false">关 闭</el-button>
      </div>
    </el-dialog>

    <el-table
      stripe
      v-loading="listLoading"
      :row-style="{height:'45px'}"
      :cell-style="{padding:'0px'}"
      style="font-size: 14px;width: 100%"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      :data= picTable >
      <el-table-column
        prop="index"
        align="center"
        label="序号"
        width="100">
      </el-table-column>
      <el-table-column
        align="center"
        prop="picName"
        label="图文名称"
        width="180"
        :show-overflow-tooltip='true' >
      </el-table-column>
      <el-table-column
        align="center"
        prop="picType"
        label="发布类型"
        width="180">
        <template slot-scope="scope">
          <el-tag v-if=" scope.row.picType === '公告信息'" type="warning" effect="dark">公告信息</el-tag>
          <el-tag v-else-if="scope.row.picType === '用户协议'"  >用户协议</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="picStatus"
        label="状态"
        width="180">
        <template slot-scope="scope">
          <el-tag v-if=" scope.row.picStatus === '启用中'" type="success" effect="dark">启用中</el-tag>
          <el-tag v-else-if="scope.row.picStatus === '未启用'"  type="info">未启用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="内容"
        width="200">
        <template slot-scope="scope">
          <span @click="more(scope.row)">点此查看详情</span>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        prop="createTime"
        label="创建时间"
        width="200"
        :show-overflow-tooltip='true' >
      </el-table-column>
      <el-table-column  align="center" label="设置">
        <template slot-scope="scope">
          <span v-if="GLOBAL.global_limit.includes('33')">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑</el-button>
          </span>
          <span v-if="GLOBAL.global_limit.includes('34')">
            <el-button
              size="mini"
              type="danger"
              @click="Delete( scope.row)">删除</el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="el-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[5, 10]"
        :page-size="queryInfo.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>
  </div>
</template>
<script>

    export default {
        data(){
            return{
                picTable:[],
                picType:[{"id":0,"value":"公告信息"},{"id":1,"value":"用户协议"}],//下拉框
                status:[{"id":0,"value":"未启用"},{"id":1,"value":"启用中"}],//下拉框
                content: '',//富文本框中内容
                editorOption: {
                    placeholder: '编辑文章内容'
                },
                queryInfoCon:{
                    picName:"",
                    picType:"",
                    picStatus:"",
                    filterDates:null,
                },
                queryInfo:{
                    picName:"",
                    picType:"",
                    picStatus:"",
                    filterDates:null,
                    pageNum: 1,
                    pageSize: 5
                },
                addInfo:{
                    picName:"",
                    picType:"",
                    picStatus:"",
                    picDetails:"",
                    createTime:''
                },
                editInfo:{
                    id:null,
                    picName:"",
                    picType:"",
                    picStatus:"",
                    picDetails:"",
                },
                dialogFormVisible:false,
                dialogForm2Visible:false,
                dialogForm3Visible:false,
                total: 0,
            }
        },
        created() {
            this.initData();
        },
        methods: {
            initData() {
                if(this.queryInfo.picName!=this.queryInfoCon.picName||this.queryInfo.picType!=this.queryInfoCon.picType
                ||this.queryInfo.picStatus!=this.queryInfoCon.picStatus||this.queryInfo.filterDates!=this.queryInfoCon.filterDates){
                    this.queryInfo.pageNum=1
                    this.queryInfoCon.picName=this.queryInfo.picName
                    this.queryInfoCon.picType=this.queryInfo.picType
                    this.queryInfoCon.picStatus=this.queryInfo.picStatus
                    this.queryInfoCon.filterDates=this.queryInfo.filterDates
                }
                this.$axios.post("managementSystem/pic/find",this.queryInfo)
                    .then(data => {
                        if (data.status != 200) {
                            this.$message.error('服务出错' + data.status);
                        } else {
                            if (data.data.errorCode == '200') {
                                this.picTable=data.data.data
                                for (var i in this.picTable) {
                                    this.picTable[i]["index"]=parseInt(i)+1;
                                    var s=this.picTable[i]["createTime"];
                                    var time=s.split("-")
                                    this.picTable[i]["createTime"]=time[0]+"年"+time[1]+"月"+time[2]+"日"
                                }
                                this.total=data.data.totalNum
                            }
                        }
                    });
            },
            showAdd(){
                this.dialogFormVisible = true;
                this.addInfo.picName = ""
                this.addInfo.picType = ""
                this.addInfo.picStatus = ""
                this.addInfo.picDetails = ""
                this.addInfo.createTime = ''
            },
            addPic() {
                this.dialogFormVisible = false;
                var today = new Date()
                this.addInfo.createTime = (today.getFullYear()) + "-" + (today.getMonth() + 1) + "-" + today.getDate();
                console.log("添加的信息：",this.addInfo)
                this.$axios.post("managementSystem/pic/insert",this.addInfo)
                    .then(data => {
                        if (data.status != 200) {
                            this.$message.error('服务出错' + data.status);
                        } else {
                            if (data.data.errorCode == '200') {
                                this.$message({
                                    message: '插入成功',
                                    type: 'success'
                                });
                            }else{
                                this.$message.error('插入失败');
                            }
                            this.initData()
                        }
                    });
            },
            Edit() {
                this.dialogForm2Visible = false;
                this.$axios.post("managementSystem/pic/edit",this.editInfo)
                    .then(data => {
                        if (data.status != 200) {
                            this.$message.error('服务出错' + data.status);
                        } else {
                            if (data.data.errorCode == '200') {
                                this.$message({
                                    message: '编辑成功',
                                    type: 'success'
                                });
                            }else{
                                this.$message.error('编辑失败');
                            }
                            this.initData()
                        }
                    });
            },
            more(row){
                this.content=row.picDetails
                this.dialogForm3Visible = true;
            },
            // 监听pagesize改变的事件
            handleSizeChange(newSize) {
                this.queryInfo.pageSize = newSize
                this.initData()
            },
            // 监听 页码值 改变的事件
            handleCurrentChange(newPage) {
                // console.log(newPage)
                this.queryInfo.pageNum = newPage
                this.initData()
            },
            handleEdit(row) {  //进入编辑表单
                this.editInfo.id = row.id
                this.editInfo.picName = row.picName
                this.editInfo.picStatus = row.picStatus
                this.editInfo.picType = row.picType
                this.editInfo.picDetails = row.picDetails
                this.dialogForm2Visible = true
            },
            Delete(row){
                this.$confirm('此操作将永久删除该图文, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'danger',
                    center: true
                }).then(() => {
                    console.log("删除id:",row.id)
                    this.$axios.post("managementSystem/pic/delete", {"id": row.id})
                        .then(data => {
                            if (data.status != 200) {
                                this.$message.error('服务出错' + data.status);
                            } else {
                                if (data.data.errorCode == '200') {
                                    this.$message({
                                        message: '删除成功',
                                        type: 'success'
                                    });
                                } else {
                                    this.$message.error('删除失败');
                                }
                                this.initData()
                            }
                        });
                })
            }
        }
    }
</script>
